<template>
    <el-dialog id="company-job-show"
               top="5vh"
               append-to-body
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="view"></icon>
                显示职位 {{ companyJob.id }}
            </span>
        </div>
        <!-- 操作按钮 -->
        <div class="text-center">
            <el-button-group>
                <el-button size="medium" @click="handleReload">
                    <icon name="refresh"></icon>
                    重新载入
                </el-button>
                <el-button size="medium" @click="dialogCompanyUserShow(companyJob.uid)">
                    <icon name="user"></icon>
                    账户
                </el-button>
                <el-button size="medium" @click="dialogCompanyBasicShow(companyJob.com_id)">
                    <icon name="company"></icon>
                    企业信息
                </el-button>
                <el-button size="medium" @click="dialogCompanyJobReceiveResumeSend(companyJob.id)">
                    <icon name="resume-send"></icon>
                    收到的简历
                </el-button>
                <el-button size="medium" @click="dialogCompanyJobInterview(companyJob.id)">
                    <icon name="interview"></icon>
                    发送的面试
                </el-button>
            </el-button-group>
        </div>
        <!-- 职位信息 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">职位信息</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 职位名称 -->
                <el-descriptions-item label="职位名称：" :span="2">
                    <el-input v-model="model.job_title" size="medium" placeholder="职位名称"></el-input>
                </el-descriptions-item>
                <!-- 类型 -->
                <el-descriptions-item label="职位类型：" :content-style="{width: '320px'}">
                    <el-select v-model="model.part_status" size="medium" placeholder="职位类型">
                        <el-option v-for="item in positionTypeOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 招聘人数 -->
                <el-descriptions-item label="招聘人数：">
                    <el-input v-model="model.recruiting_num" type="number" size="medium" placeholder="招聘人数"></el-input>
                </el-descriptions-item>
                <!-- 行业 -->
                <el-descriptions-item label="所属行业：">
                    <el-select v-model="model.industry" size="medium" placeholder="所属行业">
                        <el-option v-for="item in industryOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 薪资待遇 -->
                <el-descriptions-item label="薪资待遇：" :span="2">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-select v-model="model.salary_above" size="medium" placeholder="薪资待遇">
                                <el-option v-for="item in expectedSalaryOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="ml-10 mr-10">~</div>
                        <div class="r-flex__item">
                            <el-select v-model="model.salary_below"
                                       size="medium"
                                       placeholder="薪资待遇"
                                       :disabled="model.salary_above === 0">
                                <el-option v-for="item in expectedSalaryOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div v-show="model.salary_above > 0" class="ml-10">元/月</div>
                    </div>
                </el-descriptions-item>
                <!-- 期望职位 -->
                <el-descriptions-item label="职位分类：" :span="2">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-tag v-show="model.work_post.length === 0"
                                    :disable-transitions="true"
                                    type="danger"
                                    class="font-s14">不能为空</el-tag>
                            <div class="detail-tag">
                                <el-tag v-for="(item, index)  in model.work_post"
                                        :key="item.value"
                                        :disable-transitions="true"
                                        @close="handlePositionTagClose(index)"
                                        class="font-s14"
                                        closable>
                                    {{ item.label }}
                                </el-tag>
                            </div>
                        </div>
                        <el-popover v-model="popover.positionVisible"
                                    placement="bottom" >
                            <el-cascader-panel ref="position-plus"
                                               :options="positionOptions"
                                               @change="handleChangePositionPlus"></el-cascader-panel>
                            <el-button slot="reference"
                                       :type="model.work_post.length < 5 ? 'primary' : 'info'"
                                       size="mini"
                                       icon="el-icon-plus"
                                       :plain="!popover.positionVisible"
                                       :disabled="model.work_post.length >= 5"
                                       circle></el-button>
                        </el-popover>
                    </div>
                </el-descriptions-item>
                <!-- 工作地区 -->
                <el-descriptions-item label="工作地区：" :span="2">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-tag v-show="model.work_area.length === 0"
                                    :disable-transitions="true"
                                    type="danger"
                                    class="font-s14">不能为空</el-tag>
                            <div class="detail-tag">
                                <el-tag v-for="(item, index) in model.work_area"
                                        :key="item.value"
                                        :disable-transitions="true"
                                        @close="handleAreaTagClose(index)"
                                        class="font-s14"
                                        closable>
                                    {{ String(item.value).length === 8 ? item.label : item.merge_label }}
                                </el-tag>
                            </div>
                        </div>
                        <el-popover v-model="popover.areaVisible"
                                    placement="bottom">
                            <el-cascader-panel ref="area-plus"
                                               :options="workAreaOptions"
                                               @change="handleChangeAreaPlus"></el-cascader-panel>
                            <el-button slot="reference"
                                       :type="model.work_area.length < 5 ? 'primary' : 'info'"
                                       size="mini"
                                       icon="el-icon-plus"
                                       :plain="!popover.areaVisible"
                                       :disabled="model.work_area.length >= 5"
                                       circle></el-button>
                        </el-popover>
                    </div>
                </el-descriptions-item>
                <!-- 职位福利 -->
                <el-descriptions-item label="职位福利：" :span="2">
                    <el-select v-model="model.welfares"
                               multiple
                               filterable
                               allow-create
                               default-first-option
                               size="medium"
                               placeholder="福利标签">
                        <el-option v-for="item in welfareOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 职位描述 -->
                <el-descriptions-item label="职位描述：" :span="2">
                    <el-input v-model="model.description" type="textarea" :rows="3" placeholder="自我介绍"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!--职位要求-->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">职位要求</span>
                    </div>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 学历要求 -->
                <el-descriptions-item label="学历要求：">
                    <el-select v-model="model.education" size="medium" placeholder="学历要求">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="item in educationOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 相关经验 -->
                <el-descriptions-item label="相关经验：">
                    <el-select v-model="model.work_year" size="medium" placeholder="相关经验">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="item in workYearOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 性别 -->
                <el-descriptions-item label="性别：">
                    <el-select v-model="model.gender" size="medium" placeholder="性别">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="item in genderOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 语言 -->
                <el-descriptions-item label="语言：">
                    <el-select v-model="model.language" size="medium" placeholder="语言">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="item in languageOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <!-- 薪资待遇 -->
                <el-descriptions-item label="年龄：" :span="2">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-select v-model="model.age_above" size="medium" placeholder="年龄">
                                <el-option label="不限" :value="0"></el-option>
                                <el-option v-for="item in ageOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="ml-10 mr-10">~</div>
                        <div class="r-flex__item">
                            <el-select v-model="model.age_below"
                                       size="medium"
                                       placeholder="年龄"
                                       :disabled="model.age_above === 0">
                                <el-option label="不限" :value="0"></el-option>
                                <el-option v-for="item in ageOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!--联系方式-->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">联系方式</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-radio-group v-model="model.contact_info" size="medium">
                        <el-radio-button :label="0">基本</el-radio-button>
                        <el-radio-button :label="1">部门</el-radio-button>
                        <el-radio-button :label="2">独立</el-radio-button>
                        <el-radio-button :label="3">保密</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <!-- 部门 -->
            <el-descriptions v-show="model.contact_info === 1"
                             size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 部门 -->
                <el-descriptions-item label="部门：">
                    <el-select v-model="model.department"
                               size="medium"
                               placeholder="部门"
                               :disabled="companyJob.departments.length === 0">
                        <el-option label="请选择" :value="0"></el-option>
                        <el-option v-for="item in companyJob.departments"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-descriptions-item>
            </el-descriptions>
            <!-- 独立 -->
            <el-descriptions v-show="model.contact_info === 2"
                             size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 联系人 -->
                <el-descriptions-item label="联系人：" :span="2">
                    <el-input v-model="model.contact.contacts" size="medium" maxlength="4" placeholder="联系人"></el-input>
                </el-descriptions-item>
                <!-- 手机号码 -->
                <el-descriptions-item label="手机号码：" :content-style="{width: '370px'}">
                    <el-input v-model="model.contact.mobile" size="medium" placeholder="手机号码"></el-input>
                </el-descriptions-item>
                <!-- 电话号码 -->
                <el-descriptions-item label="电话号码：">
                    <el-input v-model="model.contact.phone" size="medium" placeholder="电话号码 如：0577-27813000"></el-input>
                </el-descriptions-item>
                <!-- 传真号码 -->
                <el-descriptions-item label="传真号码：">
                    <el-input v-model="model.contact.fax" size="medium" placeholder="传真号码 如：0577-62732319"></el-input>
                </el-descriptions-item>
                <!-- 电子邮箱 -->
                <el-descriptions-item label="电子邮箱：">
                    <el-input v-model="model.contact.email" size="medium" placeholder="电子邮箱"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!--审核状态-->
        <section class="mt-50">
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span class="detail-project__mark"></span>
                        <span class="detail-project__label">审核状态</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-radio-group v-model="model.job_status" size="medium">
                        <el-radio-button :label="0">待审</el-radio-button>
                        <el-radio-button :label="1">已审</el-radio-button>
                        <el-radio-button :label="2">屏蔽</el-radio-button>
                        <el-radio-button :label="4">删除</el-radio-button>
                        <el-radio-button :label="7">冻结</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </section>

        <!-- 提交 -->
        <div class="mt-20 text-right">
            <el-button type="text"
                       size="medium"
                       @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       :loading="saveLoading"
                       @click="save">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>

        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit, Watch } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import FunctionMixin from '@/mixins/function'
import OptionsMixin from '@/mixins/options'
import CompanyMixin from '@/mixins/company'

import { toJson, loading, errorMessage, successMessage, warningMessage } from '@/utils'

const module = namespace('cms/companyJob')

import CompanyUserShow from '@/views/cms/company/company-user/Show.vue'
import CompanyBasicShow from '@/views/cms/company/company-basic/Show.vue'
import CompanyJobReceiveResumeSend from '@/views/cms/personal/resume-send/CompanyJobReceiveResumeSend.vue'
import CompanyJobInterview from '@/views/cms/company/interview/CompanyJobInterview.vue'

@Component({
  components: {
    CompanyUserShow,
    CompanyBasicShow,
    CompanyJobReceiveResumeSend,
    CompanyJobInterview
  }
})
export default class Show extends mixins(FunctionMixin, OptionsMixin, CompanyMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State companyJob!: any
  @module.Action show!: (payLoad: any) => Promise<any>
  @module.Action update!: (payLoad: any) => Promise<any>

  // form 模型
  public model: any = {}

  // 保存加载状态
  private saveLoading: boolean = false

  // popover
  private popover = {
    positionVisible: false,
    areaVisible: false
  }

  // 监听薪资 开始
  @Watch('model.salary_above')
  onChangeSalaryAbove(newVal: number, oldVal: number): void {
    if (newVal === 0 && this.model.salary_below > newVal) {
      this.model.salary_below = newVal
    } else if(newVal > this.model.salary_below) {
      this.model.salary_below = newVal
    }
  }
  // 监听薪资 结束
  @Watch('model.salary_below')
  onChangeSalaryBelow(newVal: number, oldVal: number): void {
    if (newVal === 0 && this.model.salary_above > newVal) {
      this.model.salary_above = newVal
    } else if (newVal < this.model.salary_above) {
      this.model.salary_above = newVal
    }
  }

  // 监听年龄 开始
  @Watch('model.age_above')
  onChangeAgeAbove(newVal: number, oldVal: number): void {
    if (newVal === 0 && this.model.age_below > newVal) {
      this.model.age_below = newVal
    } else if(newVal > this.model.age_below) {
      this.model.age_below = newVal
    }
  }
  // 监听年龄 结束
  @Watch('model.age_below')
  onChangeAgeBelow(newVal: number, oldVal: number): void {
    if (newVal === 0 && this.model.age_below > newVal) {
      this.model.age_below = newVal
    } else if (newVal < this.model.age_above) {
      this.model.age_above = newVal
    }
  }

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.companyJob) // 赋给模型
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    const _loading = loading({target: '#company-job-show'})
    this.show({id: this.companyJob.id}).then((res) => {

      this.model = toJson(this.companyJob) // 重新赋给模型

      _loading.close()
      res.status === 200 ? successMessage('重新载入成功！') : errorMessage(res.message)
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 处理地区标签删除
   *
   * @param {number} index 索引
   * @return {void}
   */
  private handlePositionTagClose(index: number): void {
    this.model.work_post.splice(index, 1)
  }

  /**
   * 添加职位选项
   *
   * @param {Array} value 选定值
   * @return {void}
   */
  private handleChangePositionPlus(value: Array<number>): void {
    const nodes = (this.$refs['position-plus'] as any).getCheckedNodes()
    if (nodes.length === 1) {
      const node = nodes[0]
      if (!this.model.work_post.find((item: any) => item.value === node.value)) {
        this.model.work_post.push({
          'value': node.value,
          'label': node.label
        })
        this.popover.positionVisible = false
      } else {
        warningMessage(`${node.label} 已存在！`)
      }
    }
  }

  /**
   * 处理地区标签删除
   *
   * @param {number} index 索引
   * @return {void}
   */
  private handleAreaTagClose(index: number): void {
    this.model.work_area.splice(index, 1)
  }

  /**
   * 处理地区添加
   *
   * @param {Array} value 选定值
   * @return {void}
   */
  private handleChangeAreaPlus(value: Array<number>): void {
    const nodes = (this.$refs['area-plus'] as any).getCheckedNodes()
    if (nodes.length === 1) {
      const node = nodes[0]
      if (!this.model.work_area.find((item: any) => item.value === node.value)) {
        this.model.work_area.push({
          'value': node.value,
          'label': node.label,
          'merge_label': node.pathLabels.join('-')
        })
        this.popover.areaVisible = false
      } else {
        warningMessage(`${node.label} 已存在！`)
      }
    }
  }

  /**
   * 保存
   *
   * @return {void}
   */
  private save(): void
  {
    this.saveLoading = true

    this.update({ id: this.companyJob.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/edit';
</style>